<template>
  <!--指定高度 , 并且指定鼠标滑过, 指定事件 , 鼠标离开 , 指定事件-->
  <div
    @mouseout="leave()"
    @mouseover="enver()"
    v-if="friend"
  >
    <el-menu-item
      style="padding: 0;height: 70px"
    >

      <!--    删除会话的按钮-->
      <div
        class="el-delete"
        title="删除会话"
        v-show="isShowdelete"
        @click="deleteConversation()">
        <i class="el-icon-close"/>
      </div>
      <!--      指定未读消息的数量-->
      <div
        v-if="conversation.unreadCount>0"
        class="unread-count">
        {{ conversation.unreadCount > 99 ? "99+" : conversation.unreadCount }}
      </div>


      <!--    点击会话条目 , 切换会话-->
      <div id="Friend" @click="selectConversation">
        <div class="box1">
          <el-avatar shape="square" :size="45" :src="friend.url"></el-avatar>
        </div>
        <!--      消息信息-->
        <div class="box2">
          <!--              消息的时间-->
          <h4 class="boxh5">{{ ProcessingData() }}</h4>
          <!--             发送者的名字-->
          <h4 class="boxh4">{{ friend.name }}</h4>
          <!--   消息内容-->
          <h4 class="boxh6" :title="conversation.lastMessage.messageForShow">
            {{ Processing() }}
          </h4>
        </div>
      </div>
    </el-menu-item>
  </div>
</template>

<script>
import {mapGetters, mapState} from "vuex";
import tim from "@/tim";

export default {
  name: "Cli",
  props: ['conversation'],
  data() {
    return {
      //指定是否展示删除会话的按钮
      isShowdelete: false
    }
  },
  //函数
  methods: {
    //处理消息的内容
    Processing() {
      //获取最后一条消息的内容
      var text = this.conversation.lastMessage.payload.text;
      //获取类型
      var textype = this.conversation.lastMessage.type;

      if (textype == 'TIMTextElem') {  //文本类型
        //判断字符串的长度 , 是否大于10
        if (text.length >= 12) {
          //  截取字符串
          var str = text.substring(0, 12);
          return str + "...";
        }
        return text;
      } else if (textype == 'TIMImageElem') { //图片消息
        return "【图片】";
      } else if (textype == 'TIMVideoFileElem') { //视频消息
        return "【视频】";
      } else if (textype == 'TIMFileElem') { //文件
        return "【文件】";
        //  判断自定义的消息
      } else if (textype == 'TIMCustomElem') { //自定义消息
        return "【---------------】";
      } else {
        return "暂无聊天内容"
      }
    },
    ProcessingData() {
      //获取最后一条消息的时间
      if (!this.conversation.lastMessage ||
        !this.conversation.lastMessage.lastTime
      ) {
        return "..."
      }
      var date = this.conversation.lastMessage.lastTime;
      //判断长度是否为0
      var time = this.formatTime(date * 1000);
      return time;
    },
    formatTime(time) {
      if (time == null) {
        return "";
      }
      var dat = new Date(parseInt(time));

      // return dat.toLocaleDateString();
      if (new Date().getTime() - dat.getTime() < 86400000) {
        return dat.toLocaleTimeString();
      }
      return dat.toLocaleDateString();
    },
    //  计算会话的名字 : 就是会话的id
    conversationId() {
      if (this.conversation.type === this.TIM.TYPES.CONV_C2C) {
        return (this.conversation.userProfile.nick ||
          this.conversation.userProfile.userID)
      }
      return "";
    },
    //  点击会话条目 , 切换会话
    selectConversation() {
      console.log("要进行切换的条目 : 会话" + this.conversation.conversationID);
      //点击的会话, 和当前的会话 , 不是同一个会话 , 则切换会话
      if (this.conversation.conversationID !== this.currentConversation.conversationID) {
        //  切换会话 , 调用切换换换的函数  ,来进行切换会话
        this.$store.dispatch('timMessage/SwitchTheSession', this.conversation.conversationID)
      }
    },
    //  删除会话
    deleteConversation() {
      this.$store.commit('timMessage/showMessage', {
        type: 'success',
        message: '删除会话'
      })
      //  开始删除会话
      tim.deleteConversation(this.conversation.conversationID);
      //  判断 , 删除的会话, 是否是当前的会话 , 如果是当前的会话 , 则重置当前的会话
      if (this.currentConversation.conversationID == this.conversation.conversationID) {
        //  重置当前会话
        this.$store.commit('timMessage/resetCurrent')
      }


    },
    //  指定显示删除会话的按钮
    enver() {
      this.isShowdelete = true;
    },
    //  指定关闭会话的按钮
    leave() {
      this.isShowdelete = false;
    }


  },
  computed: {
    ...
      mapGetters(['id']),
    ...
      mapState({
        //当前会话
        currentConversation: (state) => state.timMessage.currentConversation,
        friends: (state) => state.user.friends

      }),
//通过账号 , 到用户的朋友列表中 , 查询到用户的信息 , 进行展示
    friend() {
      //获取会话的id
      var converstaionId = this.conversationId();
      //  通过id , 到朋友列表中 , 查询到用户的信息 , 进行展示
      for (let i = 0; i < this.friends.length; i++) {
        //  判断 , 用户 , 是否相同 , 如果相同 , 则把用户的信息 , 返回出去
        if (this.friends[i].id == converstaionId) {
          return this.friends[i];
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
/*<!-- 时间 -->*/
.boxh5 {
  /*靠右对齐*/
  text-align: right;
  position: relative;
  top: -25px;
  font-size: 13px;
  font-weight: 400;
  color: #b0b0b0
}

/*名字*/
.boxh4 {
  text-align: left;
  position: relative;
  top: -90px;
  font-size: 15px;
  font-weight: 400;
  margin-left: 15px;
  color: #111111;
  font-family: 微软雅黑;
}

#Friend {
  display: flex;
  border-bottom: 1px solid #dcdada;
  height: 69px;
}

#Friend:hover {
  background-color: #c9c6c6;
}

.box1 {
  float: left;
  width: 60px;
  padding-top: 6px;
  padding-left: 10px;

}

.box2 {
  float: left;
  height: 100%;
  width: calc(100% - 65px);
}

/*消息*/
.boxh6 {
  text-align: left;
  position: relative;
  top: -140px;
  padding-left: 25px;
  font-size: 13px;
  font-family: 微软雅黑;
  font-weight: 400;
  color: #b0b0b0
}

/*删除会话的按钮*/
.el-delete {
  position: absolute;
  left: 90%;
  top: -22px;
  /*  指定消息 , 在最上面*/
  z-index: 1;
}

//指定删除会话获取鼠标 , 改变颜色
.el-delete :hover {
  color: #c84527;
  transform: scale(1.4);
  transform: rotate(45deg);
}

//指定 未读消息的数量
.unread-count {
  height: 20px;
  width: 20px;
  border-radius: 50px;
  position: absolute;
  left: 40px;
  top: 2px;
  background-color: red;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
  color: #ffffff;
}
</style>
